<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
    <div id="app">
        <!-- <h1>练习watch</h1> -->
        <h3>这两天天津的温度==>{{wendu}}</h3>
        <button @click="change">点击一下，天津温度发生变化</button>
        <h3>当前温度：{{num}}℃</h3>
        <button @click="num++">点击一下，天津温度增加</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.devtools = true;
    const vm = new Vue({
        el:'#app',
        data: {
           status: true,
           num: 10,
           person: {
            name: '张三',
            age: 18
           }
        },
        methods: {
            change() {
                this.status = !this.status;
            }
        },
        computed: {
            wendu() {
                return this.status? '热' : '冷';
            }
        },
        watch: {
            num: {
                handler(newValue, oldValue) {
                    console.log("num值发生变化", newValue, oldValue);
                }
            },
            // 监视name 发生变化
            'person.name': {
                handler(newValue, oldValue) {
                    console.log("person.name值发生变化", newValue, oldValue);
                }
            },
            // 深度监视person
            person: {
                deep:true,
                handler(newValue, oldValue) {
                    console.log("person值发生变化", newValue, oldValue);
                }
            }

            // 仅仅是监视，没有任何的属性需要配置，简写如下
            // num(newValue, oldValue) {
            //     console.log("num值发生变化", newValue, oldValue);
            // }
        }
    })
</script>
</html>